<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title>h5前端扫码</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        /* video父类 */
        #video {
            position: relative;
            display: block;
            margin: 0 auto;
            width: 300px;
            height: 400px;
            /* border: 1px solid black; */
        }

        video {
            display: block;
            margin: 0 auto;
            width: 300px;
            height: 400px;
            background: #000;
            /* border: 1px solid black; */
        }

        /* canvas会被拉伸 */
        /* canvas {
            margin-top: 200px;
            border: 1px solid black;
            width: 159px;
            height: 159px;
        } */
        #image_id {
            display: flex;
            width: 159px;
            height: 159px;
        }

        /* 扫码区域 */
        #frame {
            position: absolute;
            width: 159px;
            height: 159px;
            border: 1px solid #14eb14;
            margin: auto;
            top: 70px;
            left: 70px;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div id="video">
        <!-- <video id="video_id"></video> -->
        <!-- <div id="frame" ></div> -->
    </div>

    <div>
        <button id="open">打开</button>
        <button id="close">关闭</button>
    </div>
    <div id="result"></div>
    <!-- <canvas id="canvas_id"></canvas> -->
    <img id="image_id">
</body>
<script src="qrscan.js"></script>
<!-- 使用前端识别二维码 ，使用jsqr（需要jquery）-->
<!-- <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script> -->
<!-- <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.17.1/umd/index.min.js"></script>  -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
<script type="text/javascript">
    // window.addEventListener('load', () => {
    //     //加载gogle识别器（失败，转jsqr）
    //     const codeReader = new ZXing.BrowserQRCodeReader();

    // });

    var ds = null;
    var scan = new QRScan('video');
    //开启摄像头
    document.getElementById('open').onclick = function () {
        openFrame(); //遮罩
        scan.openScan();

        //每隔一段时间调用扫码方法(速度太快解析接口跟不上)
        ds = window.setInterval(function () {
            startScan();
        }, 10000);
    };
    //关闭摄像头，关闭扫码，关闭定时器
    document.getElementById('close').onclick = function () {
        scan.closeScan();
        window.clearInterval(ds);
    };

    var re_div = document.getElementById('result');
    //扫描
    // function startScan() {
    //     //调用截图上传方法，data为请求成功回调json对象
    //     scan.getImgDecode(function (data) {
    //         console.log(data);
    //         var p = document.createElement('p');
    //         if (data.success) {
    //             p.innerHTML = 'RESULT: ' + data.payload;
    //         } else {
    //             p.innerHTML = 'ERROR: ' + data.msg;
    //         }
    //         re_div.appendChild(p);
    //     });
    // };

    //开启遮罩层
    function openFrame() {
        var frame = document.createElement('div')
        frame.setAttribute('id', 'frame')
        document.getElementById('video').appendChild(frame);
    }

    // 开始前端扫描,返回结果
    async function startScan() {
        var self = this;
        var video = document.getElementById('video_id');
        //创建画布
        var canvas = document.createElement('canvas');
        canvas.width = 159;
        canvas.height = 159;
        canvas.style.marginTop = "200px";
        // var canvas = document.getElementById('canvas_id');  //获取canvas对象
        var ctx = canvas.getContext('2d');
        //绘制画布图片（左右偏移70，绘制遮罩层内图片）
        await ctx.drawImage(video, 70, 70, 300, 400, 0, 0, 159, 159);
        //判断是否有canvas缓存对象blod
        // var imageData = await ctx.getImageData();
        // var image = new Image();  // canvas.toDataURL 返回的是一串Base64编码的URL
        // image.src = canvas.toDataURL("image/png"); // 指定格式 PNG(被压缩过)  
        let ImageUrl = await canvas.toDataURL('image/webp');
        var imageId = document.getElementById('image_id')
        imageId.setAttribute('src', ImageUrl);//获取image

        var p = document.createElement('p');
        //进行zxing解码(失败)--qrcode解码
        var imageData = ctx.getImageData(0, 0, 159, 159)
        var result = jsQR(imageData.data, imageData.width, imageData.height);
         //如果扫描出结果就关闭摄像头,打印成功内容
        if (result) {
            p.innerHTML = result.data;
            scan.closeScan();
            window.clearInterval(ds);
        } else {
            p.innerHTML = "识别错误"
        }
        re_div.appendChild(p);
    }
</script>

</html>